<template>
	<view class="wuyepay">
		<view class="head">
			<view class="border-back">
				<view class="position-name" style="padding-bottom: 10px;margin-top: 10px;">

					<i></i><span style="margin-left: 10px;">{{address}}</span>
				</view>
				<!-- <view class="u-font-32 u-margin-bottom-22">{{name}}{{address}}</view> -->
				<view class="u-flex u-row-between u-m-t-12">
					<view class="u-font-26 u-margin-bottom-22"><span
							style="color: #999;">类型：</span>{{tableInfo.type=='1'?"制暖":"制冷"}}</view>
					<view class="u-font-26 u-margin-bottom-22"><span
							style="color: #999;">单价：</span>{{tableInfo.price}}元/m²/年</view>

				</view>
				<view class="u-flex u-row-between">
					<view class="u-font-26 u-margin-bottom-22">
						<!-- 单价：{{homelist.wuYePrice?homelist.wuYePrice+'/'+'平方米/'+(homelist.costsPeriodUnit==1?'年':homelist.costsPeriodUnit==2?'半年':homelist.costsPeriodUnit==3?'季度':'月'):'未设置'}} -->

						<span style="color: #999;">每期金额：</span><span
							style="color: #f29100;padding-right: 3px;">{{tableInfo.money}}元/期</span>
					</view>
					<!-- <view v-if="detailsDatas.roomInfo.normalWuYeMoney" class="u-font-26 u-margin-bottom-22"><span style="color: #999;">年物业费：</span>
						<span style="color: #f29100;font-size: 18px;padding-right: 3px;">{{Number(detailsDatas.roomInfo.normalWuYeMoney).toFixed(2)}}</span>元
					</view> -->
				</view>
				<!-- <view>物业附加费</view>
				<view class="box" v-if="payList.normalFuJiaMoney.length > 0">
					<view class="u-flex-1" v-for="(item,index) in payList.normalFuJiaMoney" :key='index'>
						{{item.costsSetChildName}}: ￥{{item.costsSetChildMoney}}
					</view>
				</view> -->
				<!-- 	<view class="btn">
					预缴费用
				</view> -->
			</view>
		</view>
		<!-- 顶部 -->
		<!-- <view style="padding:20rpx;background: #f4f4f4;">
			<view style="background: #fff;" class="u-padding-30 head">
				<view class="u-font-32 u-margin-bottom-22">
					<h3 >{{tableInfo.type=='1'?"制暖":"制冷"}}</h3>
				</view>
				<view class="u-font-26 u-margin-bottom-22">楼号：{{address}}</view>
				<view class="u-font-26 u-margin-bottom-22">单价：{{tableInfo.price}}元/m²/年</view>
				<view class="u-font-26 u-margin-bottom-22">每期金额：{{tableInfo.money}}</view>
			</view>
		</view> -->
		<!-- 主体内容 -->
		<!-- <view class="main">
		
			<view class="mian_content u-padding-30 u-margin-bottom-34"
				v-for="(item,index) in payList" :key='index' >
				<view class="u-flex">
					
					<view class="u-flex-1 u-margin-left-20">
						<view :style="{'color': item.costState=='0'?'red':item.costState=='1'?'orange':'green'}"
						 >{{item.costState=='0'?"欠费":item.costState=='1'?"待缴":"预缴"}}</view>
					</view>
					
				</view>
				<view class="pay-count">
					{{item.Due}} <span style="font-size: 15px;color: #333;margin-left: 5px;">元</span>
				</view>
				<view class="u-flex u-margin-top-12">
					<view class="u-flex-1 u-margin-left-50">{{item.begin_time.substr(0,10)}} 至 {{item.end_time.substr(0,10)}}</view>
					
					
				</view>
			</view>
		</view> -->
		<view class="main">
			<view class="mian_content" v-for="(item,index) in payList" style="border-radius:20rpx;padding: 30rpx;">
				<view class="u-flex">
					<image style="width: 21px;height: 21px;padding-right: 5px;" src="../../static/index/fee.png"
						mode=""></image>
					<view>
						<span style="color: #999;" v-if="tableInfo.type=='1'">取暖费：</span>
						<span style="color: #999;" v-else>制冷费：</span>
						￥{{item.Due}}
					</view>
				</view>
				<view style="float: right;margin-top: -20px;">
					<view
						style="padding: 8rpx 20rpx;background: #F9A832;;color:#fff;border-top-left-radius:20rpx;border-bottom-right-radius:20rpx;"
						v-if="item.costState === 1">待缴</view>
					<view
						style="padding: 8rpx 20rpx;background: #ff0000;color:#fff;border-top-left-radius:20rpx;border-bottom-right-radius:20rpx;"
						v-if="item.costState === 0">欠费</view>
					<view
						style="padding: 8rpx 20rpx;background:#19be6b;color:#fff;border-top-left-radius:20rpx;border-bottom-right-radius:20rpx;;"
						v-if="item.costState!=1&&item.costState!=0">预缴</view>
				</view>
				<view class="u-flex u-m-t-10" style="margin-left: 26px;">
					<span style="color: #999;">缴费周期：</span>
					<view>{{item.begin_time.substr(0,10)}}~{{item.end_time.substr(0,10)}}</view>
				</view>
				<!-- 	<view class="u-flex u-row-between u-m-t-10">
					<view>
						
						<span
								style="color: red;margin-left: 50rpx;">违约金：</span>
							￥{{item.weiYueMoney}}
					</view>
					<view>
						<span style="color: #999;">违约天数：</span>{{item.arrearageDay}} 天
					</view>
				</view> -->

				<!-- <view style="color: #999;text-align: center;" v-if="item.chargeList == null">
					暂无附加费用
				</view> -->

				<!-- <view v-if="item.chargeList" style="background-color: #F4f4f4;width: 90%;margin: 9px auto;padding: 10px 20px;">
					<span style="color: blue;">附加费用</span>
					<view  v-for="(item1,index1) in item.chargeList" style="margin-left: 20rpx;">
						<view class="u-flex u-m-t-10">
							<span style="color: #999;">{{item1.costsSetChildName}}：</span>
							<view>{{item1.costsSetMoney.toFixed(2)}} 元</view>
						</view>
		
					</view>
				</view> -->

				<view style="text-align: right;margin-top: 10px;">
					合计：<span
						style="color: orange;padding-right: 2px;font-size:36rpx">{{Math.floor(item.Due*100)/100}}</span>元
				</view>
			</view>
			<view style="display:flex;align-items: center;padding:20px 10px">
				<view style="margin-top:-10rpx">备注：</view>
				<!-- <u-input v-model="value" :type="type" :border="border" /> -->
				<input class="uni-input" style="width: 271px;padding: 5px 11px;background-color: #fff;margin-top: -6px;"
					placeholder="请输入您要备注的内容" />
			</view>
		</view>
		<!-- footer -->
		<view class="foot">
			<view class="footer u-padding-left-30 u-flex">
				<view class="u-flex-1 u-margin-top-32">
					<!-- <u-checkbox shape="circle" v-model="allchecked" active-color="#F9A832" @change="selectAllBtn">全选</u-checkbox> -->
				</view>
				<view class="u-flex">
					<view class="u-m-t-32 u-font-32 u-m-r-20">合计：<text class="txet">￥{{money}}</text></view>
					<view class="button" @click="payBtn">缴费</view>
				</view>
			</view>
		</view>




		<!-- <view class="foot">
			<view class="footer u-padding-left-30 u-flex">
				<view class="u-flex-1 u-margin-top-32">
					<u-checkbox shape="circle" v-model="allchecked" active-color="#F9A832" @change="selectAllBtn">全选</u-checkbox>
				</view>
				<view class="u-flex-1 u-margin-top-32">
					<view class="u-m-t-32 u-font-32 u-m-r-20">合计：<text class="txet">￥{{money}}</text></view>
				</view>
				<view class="u-flex">
					
					<view class="button" @click="payBtn">缴费</view>
				</view>
			</view>
		</view> -->


		<u-toast ref="uToast" />
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tableInfo: {},
				num: 1,
				show: false,
				money: 0,
				name: '',
				address: '',
				customStyle: {
					margin: '40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象

				},
				homelist: {},
				payList: [],
				//物业费合计
				payTotal: 0,
				allchecked: false,
				type: 0,
			}
		},
		onLoad(option) {
			this.type = option.type
			// var obj = JSON.parse(option.val)
			// this.tableInfo=obj;
			// this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			// console.log(this.homelist)
			// this.$request.api.getMyHotCold({
			// 	type:1,//1.制热 2.制冷
			// 	pageIndex: 1,
			// 	room_id:this.homelist.roomId,
			// 	pro_id:this.homelist.proId,
			// 	hc_type:1
			// }).then(res => {
			// 	console.log(res)
			// 	this.listData = res.data.data.datalist
			// 	 this.tableInfo=this.listData[0]
			// 	uni.hideLoading();
			// })
		},
		onShow() {
			this.checkLogin()
			if (uni.getStorageSync('hourseList')) {
				this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]

				this.$request.api.getMyHotCold({
					type: this.type, //1.制热 2.制冷
					pageIndex: 1,
					room_id: this.homelist.roomId,
					pro_id: this.homelist.proId,
					hc_type: 1
				}).then(res => {
					console.log(res)
					this.listData = res.data.data.datalist
					this.tableInfo = this.listData[0]
					uni.hideLoading();
					this.getPayDetails()
				})



				this.name = this.homelist.proName;
				this.address = this.homelist.buildDistrictCode + '-' + this.homelist.buildTowerCode + '-' + this.homelist
					.roomUnitNumber +
					'-' + this.homelist.roomCode
			}


		},
		methods: {
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/pages/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode

							this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							// this.getList()
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh()

			},




			async getPayDetails() {
				let res = await this.$request.api.getHotColdCostListById({
					p_id: this.tableInfo.id,
					hc_pay: 1, //未支付
					type: this.type, //1.制热 2.制冷
				})
				this.payList = res.data.data.datalist
				console.log(this.payList)
				console.log(res.data.data.datalist)

				for (let a = 0; a < this.payList.length; a++) {
					this.$set(this.payList[a], 'selectionStatus', true);
					this.money += parseFloat(Number(this.payList[a].Due).toFixed(2))


				}

			},

			async payBtn() {
				if (this.money) {

					let res = await this.$request.api.getHotColdCostInfo({
						zMoney: this.money,
						room_id: this.homelist.roomId,
						phone: uni.getStorageSync('phone'),
						heaTingList: this.payList,
						proId: this.homelist.proId,
						id: this.tableInfo.id
					})
					console.log(res.data)
					if (res.data.code == 0) {
						this.money = 0;
						console.log(res.data.data)
						var item = JSON.stringify(res.data.data);
						var item2 = JSON.stringify(this.tableInfo);
						uni.navigateTo({
							url: '/pages/heating/billdetails?val=' + item + "&val2=" + item2
						});
					} else {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error'
						})
					}

					// this.$Router.push({path:'/pages/billdetails/billdetails',query:{id:res.data,money:this.payTotal}})
					// this.payTotal=0;

				}

			},
			// 取消
			cancel() {
				this.num = 1;
				this.show = false
			},

			// 定义加法函数
			add() {
				let args = arguments, //获取所有的参数
					lens = args.length, //获取参数的长度
					d = 0, //定义小数位的初始长度，默认为整数，即小数位为0
					sum = 0; //定义sum来接收所有数据的和
				//循环所有的参数
				for (let key in args) {
					//遍历所有的参数
					//把数字转为字符串
					let str = '' + args[key];
					if (str.indexOf('.') != -1) {
						//判断数字是否为小数
						//获取小数位的长度
						let temp = str.split('.')[1].length;
						//比较此数的小数位与原小数位的长度，取小数位较长的存储到d中
						d = d < temp ? temp : d;
					}
				}
				//计算需要乘的数值
				let m = Math.pow(10, d);
				//遍历所有参数并相加
				for (let key in args) {
					sum += args[key] * m;
				}
				//返回结果
				return Number(sum / m).toFixed(2);
			},
			// 定义减法
			sub(num1, num2) {
				let r1, r2, m, n;
				try {
					r1 = num1.toString().split('.')[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = num2.toString().split('.')[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1, r2));
				return (Math.round(num1 * m - num2 * m) / m).toFixed(2);
			},
			selectAllBtn() {
				let payArr = this.payList;
				this.payTotal = 0;
				payArr.forEach(item => {
					if (this.allchecked == false) {
						item.qitachecked = false
						this.payTotal = 0
					} else {
						if (!item.freeOrder) {
							item.qitachecked = true
							this.payTotal = this.add(this.payTotal, item.Due)
						}
					}
				})
			},
			changePay(item, index) {
				let payArr = this.payList;
				console.log(payArr)
				this.allchecked = true
				let a = 0;

				console.log(index)
				if (item.costSign == 3) {
					console.log("全选业务")
					//从前往后选择订单业务
					if (!item.selectionStatus) {
						for (let i = index; i < this.payList.length; i++) {
							if (this.payList[i].costSign == 3) {
								this.$set(this.payList[i], 'qitachecked', false);
							}


						}
					} else {
						for (let i = 0; i < index; i++) {
							if (this.payList[i].costSign == 3) {
								this.$set(this.payList[i], 'qitachecked', true);
								this.payTotal = this.add(this.payTotal, this.payList[i].Due)
							}
						}

					}


				}
				if (payArr.length > 0) {
					this.payTotal = 0;
					payArr.map((item) => {
						if (!item.freeOrder) {
							if (!item.qitachecked) {
								this.allchecked = false;
							} else {
								this.payTotal = this.add(this.payTotal, item.Due)
							}
						}
					});
				} else {
					this.allchecked = true;
				}
			}
		}
		// changePay(item) {
		// 	let payArr = this.payList.wuYeCost;
		// 	this.allchecked = true
		// 	let a = 0;
		// 	if (payArr.length > 0) {
		// 		this.payTotal = 0;
		// 		payArr.map((item) => {
		// 			if (!item.freeOrder) {
		// 				if (!item.wuyechecked) {
		// 					this.allchecked = false;
		// 				} else {
		// 					this.payTotal = this.add(this.payTotal, item.allMoney)
		// 				}
		// 			}
		// 		});
		// 	} else {
		// 		this.allchecked = true;
		// 	}
		// }
		// }
	}
</script>

<style scoped lang="scss">
	.main {
		margin-bottom: 300rpx;
		padding: 20rpx;
		margin-top: -17px;
	}

	.mian_content {
		background: #fff;
		padding: 10rpx 30rpx;
		margin-top: 22rpx;
	}

	page {
		background: #f4f4f4;
	}

	.position-name {
		font-size: 34rpx;
		font-weight: 550;
		color: #333333;
	}

	.position-name i {
		width: 6px;
		height: 16px;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 4px;
		display: inline-block;
		vertical-align: middle;
		margin-top: -3px;
	}

	.head {
		border-top: 1px solid rgba(0, 0, 0, .1);
		background: #f4f4f4;
		padding: 16rpx;
	}

	.border-back {
		// border: 1px solid red;
		background: rgb(255, 255, 255);
		width: 100%;
		margin: auto;
		// margin: 10px auto;
		border-radius: 10px;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
		padding: 20rpx 44rpx;
	}

	.box {
		padding: 40rpx 20rpx;
		background: rgba(244, 244, 244, 1);
		border-radius: 6px;
		margin-top: 10rpx;

		view {
			display: inline-block;
			width: 50%;
			margin-bottom: 10rpx;
		}
	}

	.btn {
		text-align: center;
		width: 290rpx;
		height: 92rpx;
		border-radius: 50rpx;
		border: 1px solid rgba(249, 168, 50, 1);
		line-height: 92rpx;
		color: #F9A832;
		font-size: 32rpx;
		margin: 40rpx auto;
	}

	.head {
		// border-radius: 20rpx;
		// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15)
	}

	.main_top {
		height: 80rpx;
		background: rgba(244, 244, 244, 1);
	}

	.foot .footer {
		width: 100%;
		height: 136rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 1);
	}

	.txet {
		color: #FD3636;
	}

	.main {
		background: #f4f4f4;
		margin-bottom: 136rpx;
	}

	.button {
		width: 242rpx;
		height: 136rpx;
		line-height: 136rpx;
		text-align: center;
		background: linear-gradient(142deg, rgba(253, 211, 97, 1) 0%, rgba(249, 168, 50, 1) 100%);
		color: #fff;
	}

	.bjq {

		padding-top: 15%;
		padding-left: 60rpx;
		padding-right: 60rpx;

	}
</style>
<style lang="scss">
	.bjq {
		.u-numberbox {
			display: flex !important;
			justify-content: space-between !important;
			width: 100% !important;
			border-top: 1px solid #DCDCDC;
			border-bottom: 1px solid #DCDCDC;
			padding: 40rpx 0;
		}


		.u-number-input {
			background-color: #fff !important;
		}

	}

	.pay-count {




		font-size: 36rpx;
		font-weight: 600;
		color: #F9A832;
		align-items: center;
		margin-top: -12px;
		float: right;
	}
</style>